<template>
  <el-container>
    <el-main>
      <div id="lineChart" class="myChart"></div>
      <div class="myChart">
        <div id="pieChart" :style="{width: '100%', height: '100%'}"></div>
      </div>
    </el-main>
    <!-- 底部信息 -->
    <el-footer>
      <div class="footer" style="text-align: center;">
        <span>Copyright © 2021 cqjtu pjy&zq.</span>
      </div>
    </el-footer>
  </el-container>
</template>
<script>
import { getStatisticsPay ,getStatisticsGoods} from '@/api/shop/order'
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

export default {
  name: 'hello',
  data() {
    return {
      resultParams: {
        date: [],
        totalPay: [],
        count: []
      },
      pieParameters:[]
    }
  },
  mounted() {
    this.drawLine()
  },
   created() {
  },
  methods: {

    drawLine() {
      let lineChart = this.$echarts.init(document.getElementById('lineChart'))
      let pieChart = this.$echarts.init(document.getElementById('pieChart'))
      console.log("2"+this.resultParams.date)
      getStatisticsPay().then((response) => {
        this.resultParams = response
        lineChart.setOption(this.createLineOption(this.resultParams.date, this.resultParams.totalPay,this.resultParams.count))
      })
      getStatisticsGoods().then((response) => {
        this.pieParameters = response.data
        pieChart.setOption(this.createPieOption(this.pieParameters))
      })

    },
    createLineOption(date, totalPay, count) {
      console.log("date:"+date)
      return {
        title: {
          text: '销售数量金额统计图'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          top: 40,
          data: ['销售额', '销售数量']
        },
        xAxis: [
          {
            type: 'category',
            data: date,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '销售额',
            min: 0,
            // interval: 50,
            axisLabel: {
              formatter: '{value} 元'
            }
          },
          {
            type: 'value',
            name: '销售数量',
            min: 0,
            interval: 5,
            axisLabel: {
              formatter: '{value} '
            }
          }
        ],
        series: [
          {
            name: '销售额',
            type: 'bar',
            data: totalPay
          },

          {
            name: '销售数量',
            type: 'line',
            yAxisIndex: 1,
            data: count
          }
        ]
      }
    },
    createPieOption(data) {
      return {
        title: {
          text: '商品月销售量统计图'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: 'bottom'
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: '销售数量',
            type: 'pie',
            radius: '50%',
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
  }
}
</script>

<style rel="stylesheets/scss" lang="scss" scoped>
.myChart {
  display: inline-block;
  width: 560px;
  height: 560px;
  margin-right: 30px;
}


</style>
